<template>
  <div>
    <el-row :gutter="20">
      <el-col
        v-for="(item,index) in planList"
        :key="index"
        :span="12"
      >
        <div class="item">
          <el-form
            :model="item"
            label-width="50px"
            @submit.native.prevent
          >
            <el-form-item :label="$t('name')">
              <span>{{ item.name }}</span>
            </el-form-item>
            <el-form-item :label="$t('firmware')">
              <el-select
                v-model="item.firmwareId"
                style="width: 80%"
                disabled
              >
                <el-option
                  v-for="(item2,index2) in firmwareList"
                  :key="index2"
                  :label="item2.name"
                  :value="item2.firmwareId"
                />
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('series')">
              <el-select
                v-model="item.seriesIdList"
                style="width: 80%"
                multiple
                disabled
              >
                <el-option
                  v-for="(item2,index2) in seriesList"
                  :key="index2"
                  :label="item2.name"
                  :value="item2.seriesId"
                />
              </el-select>
              <el-switch
                v-model="item.seriesCheck"
                disabled
              />
            </el-form-item>
            <el-form-item :label="$t('hardware')">
              <el-select
                v-model="item.hardwareIdList"
                style="width: 80%"
                disabled
                multiple
              >
                <el-option
                  v-for="(item2,index2) in hardwareList"
                  :key="index2"
                  :label="item2.name"
                  :value="item2.hardwareId"
                />
              </el-select>
              <el-switch
                v-model="item.hardwareCheck"
                disabled
              />
            </el-form-item>
            <el-form-item :label="$t('software')">
              <el-select
                v-model="item.softwareIdList"
                style="width: 80%"
                disabled
                multiple
              >
                <el-option
                  v-for="(item2,index2) in softwareList"
                  :key="index2"
                  :label="item2.name"
                  :value="item2.softwareId"
                />
              </el-select>
              <el-switch
                v-model="item.softwareCheck"
                disabled
              />
            </el-form-item>
            <el-form-item :label="$t('enable')">
              <el-switch
                v-model="item.enable"
                disabled
              />
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-edit" type="primary" @click="updateOtaPlan(item)" />
              <el-button icon="el-icon-delete" type="danger" @click="deleteOtaPlan(item)" />
            </el-form-item>
          </el-form>
        </div>
      </el-col>
      <el-col
        :span="12"
      >
        <div class="item">
          <div
            style="display: flex;justify-content: center;align-items: center;height: 340px;"
          >
            <el-button
              size="medium"
              circle
              icon="el-icon-plus"
              @click="showAdd"
            />
          </div>
        </div>
      </el-col>
    </el-row>

    <el-dialog
      :visible.sync="dialogPlanFormVisible"
    >
      <el-form
        label-width="120px"
        :model="plan"
        @submit.native.prevent
      >
        <el-form-item :label="$t('name')">
          <el-input v-model="plan.name" />
        </el-form-item>
        <el-form-item :label="$t('firmware')">
          <el-select v-model="plan.firmwareId" :disabled="plan.planId">
            <el-option
              v-for="(item,index) in firmwareList"
              :key="index"
              :label="item.name"
              :value="item.firmwareId"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('series')">
          <el-select v-model="plan.seriesIdList" multiple>
            <el-option
              v-for="(item,index) in seriesList"
              :key="index"
              :label="item.name"
              :value="item.seriesId"
            />
          </el-select>
          <el-switch
            v-model="plan.seriesCheck"
          />
        </el-form-item>
        <el-form-item :label="$t('hardware')">
          <el-select v-model="plan.hardwareIdList" multiple>
            <el-option
              v-for="(item,index) in hardwareList"
              :key="index"
              :label="item.name"
              :value="item.hardwareId"
            />
          </el-select>
          <el-switch
            v-model="plan.hardwareCheck"
          />
        </el-form-item>
        <el-form-item :label="$t('software')">
          <el-select v-model="plan.softwareIdList" multiple>
            <el-option
              v-for="(item,index) in softwareList"
              :key="index"
              :label="item.name"
              :value="item.softwareId"
            />
          </el-select>
          <el-switch
            v-model="plan.softwareCheck"
          />
        </el-form-item>
        <el-form-item :label="$t('enable')">
          <el-switch
            v-model="plan.enable"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogPlanFormVisible = false">{{ $t('cancel') }}</el-button>
        <el-button type="primary" @click="addOrUpdatePlan">{{ $t('confirm') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listOtaSeries
} from '@/api/ota/otaSeriesApi'
import {
  listOtaHardware
} from '@/api/ota/otaHardwareApi'
import {
  listOtaSoftware
} from '@/api/ota/otaSoftwareApi'
import {
  deleteOtaPlan,
  insertOtaPlan,
  updateOtaPlan,
  listOtaPlan
} from '@/api/ota/otaPlanApi'
import {
  listOtaFirmware
} from '@/api/ota/otaFirmwareApi'
import { successNotice } from '@/util/common'

export default {
  name: 'Plan',
  props: {
    productId: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      planList: [],
      firmwareList: [],
      seriesList: [],
      hardwareList: [],
      softwareList: [],
      dialogPlanFormVisible: false,
      plan: {}
    }
  },
  watch: {
    productId: {
      deep: true,
      handler(val) {
        if (this.productId) {
          this.listOtaHardware()
          this.listOtaSoftware()
          this.listOtaSeries()
          this.listOtaFirmware()
        }
      }
    }
  },
  created() {
    if (this.productId) {
      this.listOtaHardware()
      this.listOtaSoftware()
      this.listOtaSeries()
      this.listOtaFirmware()
    }
  }, methods: {
    listOtaSeries() {
      listOtaSeries({
        productId: this.productId
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.seriesList = data
        }
      })
    },
    listOtaHardware() {
      listOtaHardware({
        productId: this.productId
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.hardwareList = data
        }
      })
    },
    listOtaSoftware() {
      listOtaSoftware({
        productId: this.productId
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.softwareList = data
        }
      })
    },
    deleteOtaPlan(item) {
      const that = this
      this.$confirm(this.$t('deletePrompt'), this.$t('prompt'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          deleteOtaPlan({
            planId: item.planId
          }).then(res => {
            const { code } = res
            if (code === '200') {
              that.listOtaPlan()
            }
          })
        })
    },
    updateOtaPlan(item) {
      this.plan = item
      this.dialogPlanFormVisible = true
    },
    showAdd() {
      this.plan = {
        productId: this.productId,
        seriesCheck: true,
        enable: false,
        hardwareCheck: true,
        softwareCheck: true,
        isAdd: true
      }
      this.dialogPlanFormVisible = true
    },
    addOrUpdatePlan() {
      if (!this.plan.planId) {
        insertOtaPlan({
          ...this.plan
        }).then(res => {
          const { code } = res
          if (code === '200') {
            successNotice(this)
          }
          this.listOtaPlan()
          this.dialogPlanFormVisible = false
        })
      } else {
        updateOtaPlan({
          ...this.plan
        }).then(res => {
          this.listOtaPlan()
          this.dialogPlanFormVisible = false
        })
      }
    },
    listOtaPlan() {
      listOtaPlan({
        productId: this.productId
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          const planList = []
          data.forEach(plan => {
            const hardwareIdList = []
            plan.hardwareList.forEach(hardware => {
              hardwareIdList.push(hardware.hardwareId)
            })
            plan.hardwareIdList = hardwareIdList

            const softwareIdList = []
            plan.softwareList.forEach(software => {
              softwareIdList.push(software.softwareId)
            })
            plan.softwareIdList = softwareIdList

            const seriesIdList = []
            plan.seriesList.forEach(series => {
              seriesIdList.push(series.seriesId)
            })
            plan.seriesIdList = seriesIdList

            planList.push(plan)
          })
          this.planList = planList
          this.plan = planList[0]
        } else {
          this.planList = []
          this.plan = {}
        }
      })
    },
    listOtaFirmware() {
      listOtaFirmware({
        productId: this.productId
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.firmwareList = data
          this.listOtaPlan()
        } else {
          this.firmwareList = []
        }
      })
    }
  }
}
</script>
<style scoped>
  .item {
    background: #cfcfcf;
    border-radius: 13px;
    height: 340px;
  }
</style>
